<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
  import { departmentListApi } from '@/apis/consult'
  import type { DepartData } from '@/types/consult'
  import { computed, ref } from 'vue'
  import { objectToQueryParams } from '@/utils'

  // 科室列表
  const list = ref<DepartData[]>([])

  // 选中id
  const activeId = ref('')

  // 获取课室列表
  const getData = async () => {
    // 获取科室列表
    const res = await departmentListApi()
    activeId.value = res[0].id
    // console.log('科室列表', res)
    list.value = res
  }
  getData()

  const childList = computed(() => {
    // return list.value.filter((item) => item.id === activeId.value)[0].child
    return list.value.find((item) => item.id === activeId.value)?.child
  })
  // console.log('res', childList)

  const pageParams = defineProps<{ type: string; illnessType: number }>()
  console.log(pageParams)
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <!-- v-for 和 v-if 不能同时使用，可通过 template 空标签包裹，书写指令  -->
      <template v-for="item in list" :key="item.id">
        <view
          v-if="item.child.length > 0"
          @click="activeId = item.id"
          :class="activeId === item.id ? 'department-item active' : 'department-item'"
          >{{ item.name }}
        </view>
      </template>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        v-for="item in childList"
        :key="item.id"
        hover-class="none"
        :url="`/subpkg_consult/description/index?${objectToQueryParams({
          ...pageParams,
          depId: item.id,
        })}`"
        class="department-item"
        >{{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
